<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>

   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">

        // 同步
        // function sum(a,b){
        //     return a+b
        // }

        // var result = sum(1,2)
        // console.log(result);

        //异步1 ： 坑
        // function sum(a,b){

        //     setTimeout(() => {
        //         return a+b
        //     }, 2000);

        //     //继续执行同步
        //     console.log('同步');
        //     // ...
        //     // return undefined  默认值
        // }

        // var result = sum(1,2)
        // console.log(result); // undefined

        //异步取值方式1 ：回调 
        // 回调 是 函数a当成参数 传给另外一个函数b， 函数a就是回调
        // function sum(a,b,callback){
        //     setTimeout(() => {
        //         var result =a+b

        //         // return result 

        //         callback(result)
        //     }, 2000);
        // }

        // function callback(result){
        //     console.log(result);
        // }

        // sum(1,2,callback)

        // result 没有意义了，
        // var result = sum(1,2,callback)
        // console.log(result); // undefined

        
        // 异步取值方式2 ：Promise
        //回调地狱： ------
                        // ------
                            // ------
        // Promise
        // then -----
        // then -----
        // then -----

        // 三方接口 ： 支持回调和Promise
        // getAvatar() 
        // getAvatar((url)=>{
        //     console.log(url);
        // }) 

        // getAvatar()
        // .then((res)=>{
        //     console.log(res.url);
        // })

        // 获取异步函数setState结果
        // 1 回调函数 =>第二个参数传递回调函数 
        // 2 封装Promise
        // 3 异步函数 async...await 

      
        class App extends React.Component{

            state={a:0}

            handleClick=()=>{
                // 通过回调函数方式回去
                // this.setState({a:1})
                // this.setState([1,2,3])
                // this.setState({a:1},()=>{
                //     this.state.a
                // })

                // 对象
                // this.setStatePromise({a:1})
                // .then(_=>{
                //     console.log(this.state.a);
                // })
                // .catch(err=>{
                //     console.log(err)
                // })
                
                // 函数
                // this.setStatePromise({a:10})
                
                // this.setStatePromise((preState,prosp)=>{
                //     return {a:preState.a +1}
                // })
                // .then(()=>{
                //     console.log('promise获取值：',this.state.a);
                // })

                // this.setStatePromise(10)
                // .then(_=>{
                //     console.log(this.state.a);
                // })
                // .catch(err=>{
                //     console.log(err)
                // })
                // this.setStatePromise('10')
                // .then(_=>{
                //     console.log(this.state.a);
                // })
                // .catch(err=>{
                //     console.log(err)
                // })

                // 注意：数组是特殊对象
                // this.setStatePromise([1,2,3])
                // .then(_=>{
                //     console.log(this.state.a);
                // })
                // .catch(err=>{
                //     console.log(err)
                // })

            }


            setStatePromise=(value)=>{
                return new Promise((resolve,reject)=>{
                    if(typeof value==='object' ||typeof value==='function' ){
                        // var callback = resolve()
                        // this.setState(value,callback)
    
                        this.setState(value,resolve())
                    }else{
                        reject('setStatePromise 参数不对')
                    }
                })
            }
            


            render(){
                return (
                    <div>
                        <h1>{this.state.a}</h1>
                         {/*onClick onChange : 合成事件 对事件进行包装 (事件代理 委托)*/}
                        <button onClick={this.handleClick}>click</button>
                    </div>
                    )
            }
        }

          

        ReactDOM.render(<App />,document.getElementById('app'))
    </script>
</body>
</html>